<template>
  <div class="dashboard-pane">
    <el-row>
      <el-col :lg="{ span: 6 }" :sm="{ span: 12 }">
        <el-card class="dashboard-analysis" shadow="never">
          <dl>
            <dt>访问量</dt>
            <dd class="total">
              {{ counterInfo.visit?.value ?? '--' }}
            </dd>
            <dd class="rate">
              <div class="rate-fixed">
                <div class="item">
                  周同比 {{ counterInfo.visit?.week_add ?? '--' }}%

                  <k-icon v-if="counterInfo.visit?.week_state" name="caret-up" />
                  <k-icon v-else name="caret-down" />
                </div>
                <div class="item">
                  日同比 {{ counterInfo.visit?.day_add ?? '--' }}%

                  <k-icon v-if="counterInfo.visit?.day_state" name="caret-up" />
                  <k-icon v-else name="caret-down" />
                </div>
              </div>
            </dd>
            <dd class="footer">
              <span>日访问量 {{ counterInfo.visit?.to_day ?? '--' }}</span>
            </dd>
          </dl>
        </el-card>
      </el-col>

      <el-col :lg="{ span: 6 }" :sm="{ span: 12 }">
        <el-card class="dashboard-analysis" shadow="never">
          <dl>
            <dt>总文章数</dt>
            <dd class="total">
              {{ counterInfo.articleTotal?.value ?? '--' }} 篇
            </dd>
            <dd class="rate">
            </dd>
            <dd class="footer">
              <span>今日发表 {{ counterInfo.articleTotal?.to_day ?? '--' }} 篇</span>
            </dd>
          </dl>
        </el-card>
      </el-col>

      <el-col :lg="{ span: 6 }" :sm="{ span: 12 }">
        <el-card class="dashboard-analysis" shadow="never">
          <dl>
            <dt>会员数</dt>
            <dd class="total">
              {{ counterInfo.userTotal?.value ?? '--' }}
            </dd>
            <dd class="rate">
            </dd>
            <dd class="footer">
              <span>今日注册 {{ counterInfo.userTotal?.to_day ?? '--' }}</span>
            </dd>
          </dl>
        </el-card>
      </el-col>

      <el-col :lg="{ span: 6 }" :sm="{ span: 12 }">
        <el-card class="dashboard-analysis" shadow="never">
          <dl>
            <dt>新留言</dt>
            <dd class="total">
              {{ counterInfo.feedbackTotal?.value ?? '--' }}
            </dd>
            <dd class="rate">
            </dd>
            <dd class="footer">
              <span>总留言数 {{ counterInfo.feedbackTotal?.total ?? '--' }}</span>
            </dd>
          </dl>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import KIcon from '@/components/icon.vue'
import { getHomeCounter } from '@/services/home.service'

export default defineComponent({
  components: { KIcon },
  setup () {
    const counterInfo = ref<HomeCounterData>({})
    onMounted(async () => {
      const res = await getHomeCounter()
      console.log('f', res)
      counterInfo.value = res
    })
    return {
      counterInfo
    }
  }
})
</script>

<style scoped lang="scss">
.dashboard-pane {
  padding: 12px;
}
.fa {
  color: red;
}
.dashboard-analysis {
  font-size: 14px;
  color: rgba(0,0,0,0.85);
  margin: 12px;
  dd, dt {
    margin: 0;
  }
  dt {
    color: rgba(0,0,0,0.45);
    height: 22px;
    line-height: 22px;
  }
  .total {
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: rgba(0,0,0,0.85);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    margin-top: 4px;
  }
  .rate {
    height: 46px;
    position: relative;
    margin-bottom: 12px;
    &-fixed {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      .item {
        flex: 1;
      }
    }
  }
  .footer {
    margin-top: 8px;
    padding-top: 9px;
    border-top: solid 1px #f0f0f0;
  }
}
</style>
